<template>
  <div class="process">
    <div
      @click="changeStep(index)"
      class="step m-l-10 m-r-10"
      v-for="(step, index) in steps"
      :key="index"
    >
      <div class="card" :class="{ active: currentStep === index }">
        <div class="title">{{ step.title }}</div>
        <div class="content">{{ step.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Step {
  title: string;
  content: string;
}

const steps = ref<Step[]>([
  {
    title: '签署入驻协议',
    content: '包括入驻协议和房屋租赁协议等',
  },
  {
    title: '企业注册',
    content:
      '包括企业名称预先核准申请书、公司登记（备案）申请书、指定代表或共同委托代理人授权委托书等',
  },
  {
    title: '提交装修方案备案',
    content: '包括装修保证书和装修计划书',
  },
  {
    title: '入园登记',
    content: '提交相关工商注册材料备案',
  },
  {
    title: '正式入园',
    content: '',
  },
]);

const currentStep = ref<number>(0);
function changeStep(index: number) {
  currentStep.value = index;
}
</script>

<style scoped lang="scss">
.process {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;

  .step {
    display: flex;
    align-items: center;

    .card {
      position: relative;
      width: 200px;
      height: 200px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease-in-out;

      &.active {
        background-color: #3c8dbc;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        .title {
          color: #fff;
        }
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .content {
        font-size: 14px;
      }
    }
  }
}
</style>
